<template>
	<view class="normal-login-container">
		<view class="login-form-content">
			<view style="text-align: left;margin: 20px;">
				<uni-notice-bar v-if="msg" :speed="40" show-icon scrollable :text="msg" />
				<h2>欢迎登陆</h2>
			</view>
			<form ref="loginForm" :model="loginForm">
				<view class="input-item flex align-center">
					<view class="iconfont icon-user icon"></view>
					<input v-model="loginForm.username" type="tel" class="input" placeholder="请输入您的手机号"
						maxlength="11" />
				</view>

				<view class="input-item flex align-center" v-if="phoneLogin">
					<view class="iconfont icon-code icon"></view>
					<input v-model="loginForm.code" inputmode="numeric" class="input" style="width: 60%;"
						placeholder="请输入短信验证码" maxlength="6" />
					<view class="btn" :class="{'btn-disable':seconds!==0}" ref="codeDom" @click="sendCode">
						{{codeText}}
					</view>
				</view>

				<view class="input-item flex align-center" v-if="!phoneLogin">
					<view class="iconfont icon-password icon"></view>
					<input v-model="loginForm.password" password class="input" placeholder="请输入您的密码" maxlength="16" />
				</view>

				<view class="input-item flex align-center" v-if="!phoneLogin && captchaEnabled"
					style="width: 60%;margin: 0px;">
					<view class="iconfont icon-code icon" />
					<input v-model="loginForm.code" inputmode="numeric" class="input" placeholder="请输入验证码"
						maxlength="4" />
					<view class="login-code">
						<image :src="codeUrl" @click="getCode" class="login-code-img" />
					</view>
				</view>

				<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
				<view class="action-btn">
					<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button>
					<checkbox-group @change="loginForm.rememberMe = !loginForm.rememberMe"
						style="text-align: center;margin-top: 6px;">
						<checkbox :checked="loginForm.rememberMe">记住密码下次免输入</checkbox>
					</checkbox-group>
				</view>
			</form>
			<view class="xieyi text-center">
				<text class="text-grey1">登录即同意</text>
				<text @click="industryBookVisible=true" class="text-blue">《推广方管理制度》</text>
			</view>

			<view class="sub-info">
				<p><span class="s1"></span>其它登陆方式<span class="s2"></span></p>
				<uni-icons color="#5e6d82" @click="phoneLogin=!phoneLogin" :type="phoneLogin?'auth':'phone'"
					size="30"></uni-icons>
			</view>

			<view class="reg text-center">
				<text @click="to('pwd')" class="text-blue mg">忘记密码</text>
				<text v-if="register" @click="to('register')" class="text-blue mg">立即注册</text>
			</view>

		</view>
		<industryBook v-if="industryBookVisible" @readed="industryBookVisible=false" />
	</view>
</template>

<script>
	import industryBook from '@/components/industryBook.vue'
	import Cookies from "js-cookie"

	import {
		getCodeImg,
		sendVerifyCode
	} from '@/api/login'

	import {
		value
	} from '@/api/index'

	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt'

	export default {
		components: {
			industryBook
		},
		data() {
			return {
				msg: '',
				industryBookVisible: false,

				seconds: 0,
				codeText: "发送验证码",

				phoneLogin: false,
				codeUrl: "",
				captchaEnabled: true,
				// 用户注册开关
				register: true,
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "",
					password: "",
					// username: "",
					// password: "",
					code: "",
					rememberMe: false
				}
			}
		},
		created() {
			this.getCode()
			this.getCookie()
			value('login').then(res => {
				this.msg = res
			})
		},
		methods: {
			getCookie() {
				const username = Cookies.get("username");
				const password = Cookies.get("password");
				const rememberMe = Cookies.get('rememberMe')
				this.loginForm = {
					username: username === undefined ? this.loginForm.username : username,
					password: password === undefined ? this.loginForm.password : decrypt(password),
					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
				};
			},
			// 获取图形验证码
			getCode() {
				if (!this.phoneLogin) {
					getCodeImg().then(res => {
						this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
						if (this.captchaEnabled) {
							this.codeUrl = 'data:image/gif;base64,' + res.img
							this.loginForm.uuid = res.uuid
						}
					})
				}
			},
			sendCode() {
				// 启动倒计时
				if (this.seconds > 0) {
					return
				}
				sendVerifyCode(this.loginForm.username).then(res => {
					if (res.code == 200) {
						this.seconds = 59
						let timer = setInterval(() => {
							this.seconds--;
							this.codeText = "重新获取(" + this.seconds + ")"

							if (this.seconds <= 0) {
								this.codeText = "发送验证码"
								clearInterval(timer)
							}
						}, 1000)
					} else {
						this.$message({
							message: res.msg,
							center: true
						});
					}
				})
			},

			// 登录方法
			async handleLogin() {
				var un = this.loginForm.username
				if (un == '' || !(/^[1][3-9][0-9]{9}$/.test(un))) {
					this.$modal.msgError("手机号格式异常！")
				} else if (this.loginForm.code === "") {
					this.$modal.msgError("请输入验证码")
				} else {
					if (this.phoneLogin) {
						// 手机号验证码注册登陆
						this.$modal.loading("登录中，请稍后...")
						this.codeLogin()
					} else {
						var ps = this.loginForm.password
						if (ps == '' || ps.length < 6) {
							this.$modal.msgError("密码长度大于6位")
						} else if (!(/^[_a-zA-Z0-9]+$/.test(ps))) {
							this.$modal.msgError("仅由英文字母，数字以及下划线组成")
						} else {
							this.$modal.loading("登录中，请耐心等待...")
							this.pwdLogin()
						}
					}
				}
			},
			// 密码登录
			async pwdLogin() {
				if (this.loginForm.rememberMe) {
					Cookies.set("username", this.loginForm.username, {
						expires: 30
					});
					Cookies.set("password", encrypt(this.loginForm.password), {
						expires: 30
					});
					Cookies.set('rememberMe', this.loginForm.rememberMe, {
						expires: 30
					});
				} else {
					Cookies.remove("username");
					Cookies.remove("password");
					Cookies.remove('rememberMe');
				}

				this.$store.dispatch('Login', this.loginForm).then((res) => {
					// console.log('----res---',res)
					// if(res.code==200){
						this.$modal.closeLoading()
						this.loginSuccess()
					// }
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
			async codeLogin() {
				this.$store.dispatch('codeLogin', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				}).catch(() => {
					if (this.captchaEnabled) {
						this.getCode()
					}
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index')
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}
	.mg{
		margin: 0 20px;
		text-decoration: underline;
	}

	.normal-login-container {
		width: 100%;
		background-image: url("@/static/images/register-bg.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		padding-top: 45%;

		.login-form-content {
			width: 90%;
			margin: auto;
			padding: 10px;
			border-radius: 10px;
			background-color: #fff;

			// text-align: center;

			.input-item {
				margin: 10px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 10px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					background-color: #f5f6f7;
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 20px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 10px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}

			.sub-info {
				margin-top: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.sub-info uni-icons {
				margin-top: 10px;
				color: red;
			}

			.sub-info text {
				margin-top: 10px;
				color: #919499;
				font-size: 12px;
			}

			.sub-info p {
				font-size: 13px;
				color: #303030;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.sub-info p span {
				display: block;
				width: 90px;
				height: 2px;
				background-image: linear-gradient(to left, #606060, #f4eacc);
				margin: 0 8px;
			}

			.sub-info p span.s2 {
				background-image: linear-gradient(to left, #f4eacc, #606060);
			}
		}
	}
</style>